<template>
    <div class="cneter-vue">
        <div class="title">周末去哪儿</div>
        <ul>
            <li class="item" v-for="(list,index) in lists" :key="list.key">
                    <img class="item-img" :src="list.imgsrc">
                    <div class="item-info">
                        <p class="item-title"><strong>{{list.p_1}}</strong></p>
                        <p class="item-desc">{{list.p_2}}</p>
                        <button class="item-button">{{list.item_detail}}</button>
                    </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: "HomeWeekend",
    data() {
        return {
            lists: [{
                key:"0001",
                imgsrc: "//imgs.qunarzz.com/p/tts1/1904/58/a7281ee040e20502.jpg_256x144_73dce5aa.jpg",
                p_1: "大连海洋海世界",
                p_2: "大连海洋海世界大连海洋海世界",
                item_detail:"查看详情",
            },
            {
                key:"0002",
                imgsrc: "//imgs.qunarzz.com/p/tts1/1904/58/a7281ee040e20502.jpg_256x144_73dce5aa.jpg",
                p_1: "大连海洋海世界",
                p_2: "大连海洋海世界大连海洋海世界",
                item_detail:"查看详情",
            },
            {
                key:"0003",
                imgsrc: "//imgs.qunarzz.com/p/tts1/1904/58/a7281ee040e20502.jpg_256x144_73dce5aa.jpg",
                p_1: "大连海洋海世界",
                p_2: "大连海洋海世界大连海洋海世界",
                item_detail:"查看详情",
            },
            {
                key:"0004",
                imgsrc: "//imgs.qunarzz.com/p/tts1/1904/58/a7281ee040e20502.jpg_256x144_73dce5aa.jpg",
                p_1: "大连海洋海世界",
                p_2: "大连海洋海世界大连海洋海世界",
                item_detail:"查看详情",
            },
            {
                key:"0005",
                imgsrc: "//imgs.qunarzz.com/p/tts1/1904/58/a7281ee040e20502.jpg_256x144_73dce5aa.jpg",
                p_1: "大连海洋海世界",
                p_2: "大连海洋海世界大连海洋海世界",
                item_detail:"查看详情",
            },
            {
                key:"0006",
                imgsrc: "//imgs.qunarzz.com/p/tts1/1904/58/a7281ee040e20502.jpg_256x144_73dce5aa.jpg",
                p_1: "大连海洋大连海洋海世界大连海洋海世界海世界",
                p_2: "大连海洋海世界大连海大连海洋海世界大连海洋海世界洋海世界",
                item_detail:"查看详情",
            }],
        }
    },
}
</script>

<style scoped>
    cneter-vue{
        padding:0.2rem;
    }
    ul{
        background-color: #eee;
    }
    .title{
        line-height: 30px;
        background-color: #eee;
        text-indent: 2rem;
    }
    .item-img{
        width: 100%;
    }
    .item{
        margin-top:.3rem;
        background-color: white;
        padding-top: .4rem;
    }
    p{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .title{
        line-height: 30px;
        background-color: #eee;
        text-indent: 2rem;
    }
    .item-info{
        margin-top: 0.2rem;
    }
    .item-desc{
        margin-top: .4rem;
        color: rgb(58, 75, 68);
        font-size: 0.9rem;
    }
    .item-button{
        background-color: rgb(184, 52, 43);
        margin-top: .4rem;
        width: 5rem;
        height: 1.3rem;
    }
    .cneter-vue {
        padding-bottom:1rem;
    }
</style>
